import { Dialog } from "vant";
import { onMounted, ref } from "vue";
import { toFile } from "@/utils/file.js";

// 初始化摄像头
export default function useCamera() {
  let video;
  let context;
  let canvas;
  // 画布宽高
  const width = 280;
  const height = 280;

  let faceImg = ref("");

  let isShowVideo = ref(false);

  onMounted(() => {
    video = document.querySelector("video");
    canvas = document.getElementById("imgcanvas");
    context = canvas.getContext("2d");
  });

  // 初始化摄像头
  function initCamera() {
    var constraints = {
      audio: false,
      video: {
        // 优先使用前置摄像头
        facingMode: "user",
        // facingMode: "environment",
        deviceId: "default",
        height: { min: 600, ideal: 720, max: 1080 },
        width: 720,
      },
    };

    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }

    // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
    // 使用getUserMedia，因为它会覆盖现有的属性。
    // 这里，如果缺少getUserMedia属性，就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        // 首先获取现存的getUserMedia(如果存在)
        var getUserMedia =
          navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        // 有些浏览器不支持，会返回错误信息
        // 保持接口一致
        if (!getUserMedia) {
          return Promise.reject(
            new Error("getUserMedia is not implemented in this browser")
          );
        }
        //否则，使用Promise将调用包装到旧的navigator.getUserMedia
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      };
    }

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (stream) {
        isShowVideo.value = true;

        // 将关闭摄像头的变量赋值到 window 上
        window.mediaStreamTrack =
          typeof stream.stop === "function" ? stream : stream.getTracks()[0];

        // 旧的浏览器可能没有srcObject
        if ("srcObject" in video) {
          // 将视频流设置为video元素的源
          video.srcObject = stream;
        } else {
          //避免在新的浏览器中使用它，因为它正在被弃用。
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function () {
          video.play();
        };
      })
      .catch(function () {
        const messages =
          "你没有给予app摄像头权限，只有给予权限后才能使用人脸功能！";

        Dialog.alert({
          title: "警告",
          message: messages,
        }).then(() => {
          Dialog.close();
        });
      });
  }

  // 获取 base64 格式人脸照片
  function getImage(fileName) {
    // 点击，canvas画图
    context.drawImage(video, 0, 0, width, height);
    // 获取图片base64链接
    const image = canvas.toDataURL("image/png");
    faceImg.value = image;
    // 获取图片 base64 编码
    // let imageBase64 = image.split(",")[1];

    const fileImg = toFile(image, fileName);

    return fileImg;
  }

  return { initCamera, getImage, faceImg, isShowVideo };
}
